<template>
  <PageWrapper
  style="font-size: 18px"
    :title="`用户` + userId + `的资料`"
    content="这是用户资料详情页面。可以展示并且查看用户的详情信息和操作日志"
    contentBackground
    @back="goBack"
  >
    <template #extra>
      <a-button type="primary" danger>禁用账号</a-button>
    </template>
    <template #footer>
      <a-tabs default-active-key="detail" v-model:activeKey="currentKey" style="font-size: 18px">
        <a-tab-pane key="detail" tab="用户资料" />
        <a-tab-pane key="logs" tab="操作日志" />
      </a-tabs>
    </template>
    <div class="pt-4 m-4 desc-wrap">
      <template v-if="currentKey == 'detail'">
        <div
          v-for="item in DetailList"
          :key="item.label"
          class="items-detail flex h12 items-center px-20 text-18px"
        >
          <div class="w30">{{ item.label }}</div>
          <div class="ml-40">{{ item.value }}</div>
        </div>
      </template>
      <template v-if="currentKey == 'logs'">
        <BasicTable
          :columns="columns"
          :dataSource="dataSource"
          :showIndexColumn="false"
          :pagination="pagination"
          @fetch-success="handleFetchSuccess"
          @register="registerTable"
          style="font-size: 18px"
        >
        </BasicTable>
      </template>
    </div>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { ref, reactive, onMounted } from 'vue';
  import { useRoute } from 'vue-router';
  import { PageWrapper } from '@/components/Page';
  import { useGo } from '@/hooks/web/usePage';
  import { useTabs } from '@/hooks/web/useTabs';
  import { Tabs } from 'ant-design-vue';
  import { BasicTable, useTable } from '@/components/Table';
  import { BasicColumn } from '@/components/Table';
  // import { getLogList } from '/@/api/demo/system'; //
  defineOptions({ name: 'AccountDetail' });

  const ATabs = Tabs;
  const ATabPane = Tabs.TabPane;
  const route = useRoute();
  const go = useGo();

  // 此处可以得到用户ID
  const userId = ref(route.params?.id);
  const currentKey = ref('detail');
  const { setTitle } = useTabs();
  const DetailList = ref([
    {
      label: '用户名',
      value: 'admin',
    },
    {
      label: '用户昵称',
      value: 'admin',
    },
    {
      label: '用户邮箱',
      value: 'EMAIL',
    },
    {
      label: '用户手机',
      value: 'PHONE',
    },
    {
      label: '用户状态',
      value: '正常',
    },
    {
      label: '用户头像',
      value: '头像',
    },
    {
      label: '创建时间',
      value: '2022-01-01 01:01:01',
    },
    {
      label: '最后登录时间',
      value: '2022-01-01 01:01:01',
    },
    {
      label: '用户角色',
      value: 'admin',
    },
  ]);

  // 表单列表数据
  const dataSource = ref([
    {
      account: 'admin',
      loginLocation: '浙江省杭州市',
      loginTime: '2022-01-01 01:01:01',
      loginmodel: '用户管理',
      logintype: '修改密码',
    },
    {
      account: 'admin',
      loginLocation: '浙江省杭州市',
      loginTime: '2022-01-01 01:01:01',
      loginmodel: '用户管理',
      logintype: '修改密码',
    },
    {
      account: 'admin',
      loginLocation: '浙江省杭州市',
      loginTime: '2022-01-01 01:01:01',
      loginmodel: '用户管理',
      logintype: '修改密码',
    },
    {
      account: 'admin',
      loginLocation: '浙江省杭州市',
      loginTime: '2022-01-01 01:01:01',
      loginmodel: '用户管理',
      logintype: '修改密码',
    },
    {
      account: 'admin',
      loginLocation: '浙江省杭州市',
      loginTime: '2022-01-01 01:01:01',
      loginmodel: '用户管理',
      logintype: '修改密码',
    },
    {
      account: 'admin',
      loginLocation: '浙江省杭州市',
      loginTime: '2022-01-01 01:01:01',
      loginmodel: '用户管理',
      logintype: '修改密码',
    },
    {
      account: 'admin',
      loginLocation: '浙江省杭州市',
      loginTime: '2022-01-01 01:01:01',
      loginmodel: '用户管理',
      logintype: '修改密码',
    },
  ]);
  // 分页参数
  const pagination = reactive({
    current: 1,
    pageSize: 10,
    total: 0,
  });

  // 表格列
  const columns: BasicColumn[] = [
    {
      title: '操作用户',
      dataIndex: 'account',
      width: 120,
    },
    {
      title: '操作地点',
      dataIndex: 'loginLocation',
      width: 180,
    },
    {
      title: '操作时间',
      dataIndex: 'loginTime',
      width: 180,
    },
    {
      title: '操作模块',
      dataIndex: 'loginmodel',
      width: 180,
    },
    {
      title: '操作类型',
      dataIndex: 'logintype',
      width: 180,
    },
  ];

  const [registerTable] = useTable({
    // api: getLogList,
    columns,
    dataSource,
    pagination,
  });

  const handleFetchSuccess = (pageData: any) => {
    dataSource.value = pageData.list;
    pagination.total = pageData.total;
  };

  onMounted(() => {
      // reload();
    getDetail();
  });

  // 设置标题
  setTitle('详情：用户' + userId.value);
  // setTitle('详情：用户' + '超级管理员');

  // 获取详情
  function getDetail() {
    console.log('获取详情');
    // const userinfo = await getDetail()
  }


  // 返回上一页
  function goBack() {
    go('/system/account');
  }
</script>

<style>
  /* .{
  justify-content: space-between
} */
</style>
